<template>
  <div>
    <el-table row-key="id" default-expand-all :tree-props="{ children: 'children' }" border
      :data="store.getters['role/getrole']" style="width: 100%">
      <el-table-column prop="id" label="角色编号" width="130" />
      <el-table-column prop="rolename" label="角色名称" width="180" />
      <el-table-column label="状态">
        <template v-slot="item">
          <div>
            {{ item.row.status == 1 ? "启用" : "禁用" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="item">
          <el-button type="primary" @click="edit(item.row.id)">编辑</el-button>
          <el-button type="danger" @click="del(item.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getroledelete } from '../../request/api'

let store = useStore()
let emit = defineEmits(['edit'])
//点击编辑传id值
let edit = (id: any) => {
  emit('edit', id)
}
store.dispatch('role/getroleActive')
//删除对应id
let del = (id: any) => {
  ElMessageBox.confirm(
    '确定要删除该信息吗！！！',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      getroledelete({ id }).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success(res.msg)
          store.dispatch('menu/changeMenuAction')
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })

}
store.dispatch('menu/changeMenuAction')

</script>

<style scoped></style>